<template>
  <div class="details-box box-centent">
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程学习</el-breadcrumb-item>
        <el-breadcrumb-item>特色课程</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nav-search">
        <el-input size="mini" placeholder="输入你要找的内容" prefix-icon="el-icon-search" v-model="search"></el-input>
      </div>
    </div>
    <router-link></router-link>
    <div class="new-item">
      <div class="item-box">
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
        <div class="item">
          <router-link :to="{name: 'curriculumDetails'}">
            <el-image style="width: 282px; height: 160px; border-radius:12px 12px 0 0" :src="url"></el-image>
          </router-link>
          <div class="item-content">
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            </router-link>
            <router-link :to="{name: 'curriculumDetails'}">
              <div class="content-msg">
                系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
              </div>
            </router-link>
            <div class="like">
              <i class="iconfont icon-xin"></i>
              <!-- <i class="iconfont icon-xin1"></i> -->
              <div class="number">105人学过</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="10" layout="prev, pager, next, total" :total="100" background pager-count="10" hide-on-single-page>
      </el-pagination>
    </div>
    <el-dialog title="修改密码" :visible.sync="centerDialogVisible" width="25%" center>
      <div class="choice-box">
        <div class="item">
          <div class="image-box">
            <el-image style="width: 318px; height: 149px; border-radius:12px 12px 0 0" :src="url"></el-image>
            <i class="iconfont icon-xuanze1 state"></i>
          </div>
          <div class="item-content">
            <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            <div class="content-msg">
              系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
            </div>

          </div>

        </div>
        <div class="item">
          <div class="image-box">
            <el-image style="width: 318px; height: 149px; border-radius:12px 12px 0 0" :src="url"></el-image>
            <i class="iconfont icon-xuanze1 state"></i>
          </div>
          <div class="item-content">
            <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            <div class="content-msg">
              系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
            </div>

          </div>
        </div>
        <div class="item">
          <div class="image-box">
            <el-image style="width: 318px; height: 149px; border-radius:12px 12px 0 0" :src="url"></el-image>
            <i class="iconfont icon-xuanze1 state"></i>
          </div>
          <div class="item-content">
            <div class="content-tilte">基于车联网的自动红绿灯控制系统</div>
            <div class="content-msg">
              系统采用车联网V2I通讯模式,利用V2I通讯协议实现汽车与交通信号灯之间······
            </div>

          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      centerDialogVisible: false,
      search: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.details-box {
  .nav-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 18px 0;
    /deep/.el-breadcrumb {
      flex: 1;
    }
    .nav-search {
      display: flex;
      align-items: center;
      /deep/ .el-input {
        width: 85%;
        .el-input__inner {
          border-radius: 12px;
          height: 21px;
          line-height: 21px;
          padding-left: 15px;
          background: #f5f7ff;
        }
      }
      /deep/ .el-input__prefix {
        left: 115px;
        .el-icon-search {
          line-height: 21px;
        }
      }
    }
  }
  .show-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    padding: 30px 39px;
    .show {
      flex: 1;
      font-size: 14px;
      color: rgba(19, 35, 64, 1);
      margin-left: 24px;
      font-weight: 600;
      .name {
        font-weight: 800;
        font-size: 18px;
        color: rgba(19, 35, 64, 1);
        margin-bottom: 16px;
      }
    }
    .exchange {
      display: flex;
      flex-direction: column;
      /deep/.el-button {
        padding: 8px 18px;
      }
      .el-button + .el-button {
        margin-left: 0;
      }
      /deep/.el-button--danger {
        margin-bottom: 12px;
        background: linear-gradient(
          314deg,
          rgba(245, 131, 146, 1) 0%,
          rgba(254, 81, 96, 1) 100%
        );
      }
      /deep/.el-button--primary {
        background: linear-gradient(
          135deg,
          rgba(91, 192, 251, 1) 0%,
          rgba(46, 141, 246, 1) 100%
        );
      }
    }
  }
  .synopsis {
    font-size: 16px;
    color: rgba(51, 69, 102, 1);
    line-height: 28px;
    padding: 24px 0;
    .synopsis-title {
      display: flex;
      align-items: center;
      font-weight: 550;
      font-size: 20px;
      color: rgba(6, 17, 37, 1);
      margin-bottom: 24px;
      .line {
        width: 4px;
        height: 20px;
        background: rgba(254, 82, 98, 1);
        border-radius: 2px;
        margin-right: 12px;
      }
    }
  }
  .new-item {
    .synopsis-title {
      display: flex;
      align-items: center;
      font-weight: 550;
      font-size: 20px;
      color: rgba(6, 17, 37, 1);
      .line {
        width: 4px;
        height: 20px;
        background: rgba(254, 82, 98, 1);
        border-radius: 2px;
        margin-right: 12px;
      }
    }

    .item-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .item {
        border-radius: 12px;
        background: #fff;
        margin-top: 24px;
        .item-content {
          padding: 16px 16px 20px 16px;

          .content-tilte {
            font-weight: 550;
            font-size: 16px;
            color: rgba(19, 35, 64, 1);
            margin-bottom: 10px;
            &:hover {
              color: #2e8df6;
            }
          }
          .content-msg {
            width: 250px;
            font-size: 14px;
            color: rgba(51, 69, 102, 1);
            line-height: 22px;
            &:hover {
              color: #2e8df6;
            }
          }
          .like {
            display: flex;
            align-items: center;
            margin-top: 5px;
            .icon-xin {
              font-size: 18px;
              color: #d34545;
            }
            .icon-xin1 {
              font-size: 18px;
            }
            .number {
              flex: 1;
              text-align: right;
              font-size: 14px;
              font-weight: 400;
              color: rgba(104, 115, 136, 1);
            }
          }
        }
      }
    }
  }
  /deep/.block {
    padding: 32px 0 48px;
    .el-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-pagination__total {
        float: right;
      }
    }
    .btn-prev,
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .el-icon {
        color: #606266;
      }
    }
    .number {
      border-radius: 14px;
      background: none;
    }
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .btn-next:disabled {
        color: #333;
      }
    }
  }
  /deep/.el-dialog__wrapper {
    .el-dialog {
      margin-top: 40vh !important;
      background: #f5f7ff;
      border-radius: 8px;
      width: 55% !important;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 22px;
          color: rgba(6, 17, 37, 1);
          font-weight: 600;
        }
      }
      .choice-box {
        display: flex;
        justify-content: space-between;
        .item {
          width: 318px;
          min-width: 318px;
          background: #fff;
          border-radius: 12px;
          .image-box {
            position: relative;
            .state {
              position: absolute;
              top: 12px;
              right: 12px;
              color: #fe5262;
            }
          }
          .item-content {
            padding: 16px 16px 20px 16px;

            .content-tilte {
              font-weight: 550;
              font-size: 14px;
              color: rgba(19, 35, 64, 1);
              margin-bottom: 8px;
            }
            .content-msg {
              width: 268px;
              font-size: 12px;
              color: rgba(51, 69, 102, 1);
              line-height: 18px;
            }
          }
        }
      }
      /deep/.el-button--primary {
        padding: 12px 158px;
        background: linear-gradient(
          135deg,
          rgba(91, 192, 251, 1) 0%,
          rgba(46, 141, 246, 1) 100%
        );
      }
    }
  }
}
</style>
